<template>
	<AdminLayout activeKey="users" :breadcrumbs="['首页','用户管理','角色权限']" tabTitle="用户管理" currentPage="users-roles">
		<view class="page">
			<!-- 页面头部 -->
		<view class="page-header">
			<view class="header-info">
				<text class="page-title">用户管理</text>
				<text class="page-subtitle">管理系统用户账号和权限</text>
			</view>
			<view class="header-actions">
				<view class="search-container">
					<view class="search-box">
						<text class="search-icon iconfont icon-sousuo"></text>
						<input class="search-input" 
							   v-model="searchKeyword" 
							   placeholder="搜索用户名或昵称..." 
							   @confirm="performSearch"
							   confirm-type="search" />
					</view>
					<button class="search-btn" @click="performSearch" :disabled="searching">
						<text class="btn-icon iconfont icon-sousuo"></text>
						<text>{{ searching ? '搜索中...' : '搜索' }}</text>
					</button>
					<button class="clear-btn" @click="clearSearch" v-if="isSearching">
						<text class="btn-icon iconfont icon-qingchu"></text>
						<text>清空</text>
					</button>
				</view>
				<button class="btn-primary" @click="showCreateDialog">
					<text class="btn-icon iconfont icon-xinzeng"></text>
					创建管理员
				</button>
			</view>
		</view>
			
			<!-- 用户统计卡片 -->
			<view class="stats-cards">
				<view class="stat-card" :class="{ 'stat-card-active': roleFilter === 'all' }" @click="filterByRole('all')">
					<view class="stat-number">{{ totalUserCount }}</view>
					<view class="stat-label">{{ isSearching ? '搜索结果' : '总用户数' }}</view>
				</view>
				<view class="stat-card" :class="{ 'stat-card-active': roleFilter === 'admin' }" @click="filterByRole('admin')">
					<view class="stat-number">{{ adminCount }}</view>
					<view class="stat-label">管理员</view>
				</view>
				<view class="stat-card" :class="{ 'stat-card-active': roleFilter === 'user' }" @click="filterByRole('user')">
					<view class="stat-number">{{ normalUserCount }}</view>
					<view class="stat-label">普通用户</view>
				</view>
			</view>
			
			<!-- 用户列表 -->
			<view class="user-table-container">
				<view class="table-header">
					<view class="table-title">用户列表</view>
					
					<!-- 筛选工具栏 -->
					<view class="filter-toolbar">
						<view class="filter-group">
							<text class="filter-group-label">
								<text class="iconfont icon-zhuangtai"></text> 状态
							</text>
							<view class="filter-buttons">
								<button class="filter-btn" :class="{ 'filter-btn-active': statusFilter === 'all' }" @click="filterByStatus('all')">
									全部 <text class="filter-count">{{ displayUsers.length }}</text>
								</button>
								<button class="filter-btn filter-btn-success" :class="{ 'filter-btn-active': statusFilter === 'active' }" @click="filterByStatus('active')">
									<text class="status-dot dot-active"></text>正常 <text class="filter-count">{{ activeCount }}</text>
								</button>
								<button class="filter-btn filter-btn-danger" :class="{ 'filter-btn-active': statusFilter === 'inactive' }" @click="filterByStatus('inactive')">
									<text class="status-dot dot-inactive"></text>禁用 <text class="filter-count">{{ inactiveCount }}</text>
								</button>
							</view>
						</view>
						
						<view class="filter-divider"></view>
						
						<view class="filter-group">
							<text class="filter-group-label">
								<text class="iconfont icon-weiguichuli"></text> 违规情况
							</text>
							<view class="filter-buttons">
								<button class="filter-btn" :class="{ 'filter-btn-active': violationFilter === 'all' }" @click="filterByViolation('all')">
									全部 <text class="filter-count">{{ displayUsers.length }}</text>
								</button>
								<button class="filter-btn" :class="{ 'filter-btn-active': violationFilter === 'none' }" @click="filterByViolation('none')">
									<text class="iconfont icon-zhengque"></text>无违规 <text class="filter-count">{{ noViolationCount }}</text>
								</button>
								<button class="filter-btn filter-btn-warning" :class="{ 'filter-btn-active': violationFilter === 'has' }" @click="filterByViolation('has')">
									<text class="iconfont icon-jinggao"></text>有违规 <text class="filter-count">{{ hasViolationCount }}</text>
								</button>
							</view>
						</view>
					</view>
					
					<view class="table-actions">
						<button class="btn-secondary" @click="loadUsers">刷新</button>
					</view>
				</view>
				
				<view class="user-table">
					<view class="table-row table-header-row">
						<view class="table-cell cell-user">用户信息</view>
						<view class="table-cell cell-role">角色权限</view>
						<view class="table-cell cell-status">状态</view>
						<view class="table-cell cell-violation">违规情况</view>
						<view class="table-cell cell-time">时间信息</view>
						<view class="table-cell cell-actions">操作</view>
					</view>
					
					<view class="table-row" v-for="user in filteredUsers" :key="user._id">
						<view class="table-cell cell-user">
							<view class="user-info">
								<view class="user-avatar">
									<text class="avatar-text">{{ getAvatarText(user.username) }}</text>
								</view>
								<view class="user-details">
									<view class="username">{{ user.username }}</view>
									<view class="nickname">{{ user.nickname || '未设置昵称' }}</view>
								</view>
							</view>
						</view>
						
				<view class="table-cell cell-role">
					<view class="role-tags">
						<view :class="['role-tag', isUserAdmin(user) ? 'role-admin' : 'role-user']">
							{{ isUserAdmin(user) ? '管理员' : '普通用户' }}
						</view>
					</view>
				</view>
						
						<view class="table-cell cell-status">
							<view :class="['status-badge', user.status === 0 ? 'status-active' : 'status-inactive']">
								<view class="status-dot"></view>
								<text>{{ user.status === 0 ? '正常' : '禁用' }}</text>
							</view>
						</view>
						
						<view class="table-cell cell-violation">
							<view class="violation-info">
								<view v-if="!user.violation_count || user.violation_count === 0" class="violation-none">
									<text>无违规</text>
								</view>
								<view v-else class="violation-badge" :class="getViolationLevel(user.violation_count)">
									<text class="violation-count">{{ user.violation_count }}次</text>
									<text class="violation-label">{{ getViolationText(user.violation_count) }}</text>
								</view>
							</view>
						</view>
						
					<view class="table-cell cell-time">
						<view class="time-info">
							<view class="time-item">
								<text class="time-label">注册:</text>
								<text class="time-value">{{ formatDateShort(user.register_date) }}</text>
							</view>
							<view class="time-item">
								<text class="time-label">登录:</text>
								<text class="time-value">{{ formatDateShort(user.last_login_date) }}</text>
							</view>
						</view>
					</view>
						
						<view class="table-cell cell-actions">
							<view class="action-buttons">
								<button class="action-btn btn-info" @click="viewUserDetail(user)" title="查看详情">
									<text class="btn-icon iconfont icon-chakan"></text>
								</button>
								<button class="action-btn btn-warning" @click="markViolation(user)" title="标记违规">
									<text class="btn-icon iconfont icon-weiguichuli"></text>
								</button>
							<button class="action-btn btn-violation" @click="viewViolations(user)" title="查看违规记录" v-if="user.violation_count > 0">
								<text class="btn-icon iconfont icon-jinggao"></text>
							</button>
							<button class="action-btn btn-edit" @click="editUser(user)" title="编辑用户">
								<text class="btn-icon iconfont icon-edit"></text>
							</button>
							<button class="action-btn" 
									:class="user.status === 0 ? 'btn-disable' : 'btn-enable'" 
									@click="toggleStatus(user)"
									:title="user.status === 0 ? '禁用用户' : '启用用户'">
								<text class="btn-icon iconfont" :class="user.status === 0 ? 'icon-jinzhi' : 'icon-qiyong'"></text>
							</button>
							<button class="action-btn btn-delete" @click="deleteUser(user)" title="删除用户">
								<text class="btn-icon iconfont icon-shanchu"></text>
							</button>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 标记违规对话框 -->
			<view v-if="showViolationDialog" class="simple-modal" @click="closeDropdown">
				<view class="modal-mask" @click="hideViolationDialog"></view>
				<view class="simple-popup" @click.stop>
					<view class="popup-header">
						<text class="popup-title">标记用户违规</text>
						<text class="popup-close" @click="hideViolationDialog">×</text>
					</view>
					
					<view class="form-container">
						<view class="violation-user-info">
							<text class="info-label">用户信息</text>
							<text class="info-value">{{ violationUser?.username }} ({{ violationUser?.nickname || '未设置昵称' }})</text>
							<text class="info-current">当前违规次数: {{ violationUser?.violation_count || 0 }}次</text>
						</view>
						
					<view class="form-item">
						<text class="label">违规类型<text style="color: red;">*</text></text>
						<view class="custom-select" @click.stop="toggleViolationDropdown">
							<text class="select-text" :class="{ placeholder: !violationForm.type }">
								{{ violationForm.type || '请选择违规类型' }}
							</text>
							<text class="select-arrow iconfont" :class="{ open: showViolationDropdown }">▼</text>
						</view>
						<view v-if="showViolationDropdown" class="dropdown-list" @click.stop>
							<view 
								v-for="(item, index) in violationTypes" 
								:key="index"
								class="dropdown-item"
								:class="{ selected: violationForm.type === item }"
								@click.stop="selectViolationType(item)"
							>
								<text>{{ item }}</text>
								<text v-if="violationForm.type === item" class="check-icon">✓</text>
							</view>
						</view>
					</view>
						
						<view class="form-item">
							<text class="label">违规说明</text>
							<textarea 
								class="textarea-input" 
								:value="violationForm.reason"
								placeholder="请输入违规的具体情况..."
								maxlength="200"
								@input="onViolationReasonInput" />
						</view>
					</view>
					
					<view class="form-actions">
						<button class="cancel-btn" @click="hideViolationDialog">取消</button>
						<button class="submit-btn" @click="submitViolation" :disabled="submitting">
							{{ submitting ? '提交中...' : '确认标记' }}
						</button>
					</view>
				</view>
			</view>
			
			<!-- 用户详情抽屉 -->
			<view v-if="showDetailDialog" class="drawer-overlay" :class="{ 'overlay-closing': drawerClosing }" @click="hideDetailDialog">
				<view class="drawer-container" :class="{ 'drawer-closing': drawerClosing }" @click.stop>
					<view class="drawer-header">
						<text class="drawer-title">用户详细信息</text>
						<button class="drawer-close" @click="hideDetailDialog">
							<text class="iconfont icon-guanbi"></text>
						</button>
					</view>
					
					<view class="drawer-body">
						<!-- 用户头部信息 -->
						<view class="detail-user-header">
							<view class="detail-avatar">
								<text class="avatar-text">{{ getAvatarText(detailUser?.username) }}</text>
							</view>
							<view class="detail-user-basic">
								<view class="detail-username">{{ detailUser?.username }}</view>
								<view class="detail-nickname">{{ detailUser?.nickname || '未设置昵称' }}</view>
								<view class="detail-role-tag" :class="isUserAdmin(detailUser) ? 'role-admin' : 'role-user'">
									{{ isUserAdmin(detailUser) ? '管理员' : '普通用户' }}
								</view>
							</view>
						</view>
						
						<!-- 详情卡片区域 -->
						<view class="detail-sections">
							<!-- 基本资料 -->
							<view class="detail-section">
								<view class="section-title">
									<text class="title-icon iconfont icon-yonghu"></text>
									<text>基本资料</text>
								</view>
								<view class="section-content">
									<view class="detail-item">
										<text class="item-label">用户ID</text>
										<text class="item-value">{{ detailUser?._id || '-' }}</text>
									</view>
									<view class="detail-item">
										<text class="item-label">用户名</text>
										<text class="item-value">{{ detailUser?.username || '-' }}</text>
									</view>
									<view class="detail-item">
										<text class="item-label">昵称</text>
										<text class="item-value">{{ detailUser?.nickname || '-' }}</text>
									</view>
									<view class="detail-item">
										<text class="item-label">邮箱</text>
										<text class="item-value">{{ detailUser?.email || '-' }}</text>
									</view>
									<view class="detail-item">
										<text class="item-label">手机号</text>
										<text class="item-value">{{ detailUser?.mobile || '-' }}</text>
									</view>
								</view>
							</view>
							
							<!-- 账户信息 -->
							<view class="detail-section">
								<view class="section-title">
									<text class="title-icon iconfont icon-zhanghao"></text>
									<text>账户信息</text>
								</view>
								<view class="section-content">
									<view class="detail-item">
										<text class="item-label">账户状态</text>
										<view :class="['status-badge-small', detailUser?.status === 0 ? 'status-active' : 'status-inactive']">
											<view class="status-dot-small"></view>
											<text>{{ detailUser?.status === 0 ? '正常' : '禁用' }}</text>
										</view>
									</view>
									<view class="detail-item">
										<text class="item-label">创建时间</text>
										<text class="item-value">{{ formatDate(detailUser?.create_date) }}</text>
									</view>
									<view class="detail-item">
										<text class="item-label">最后登录</text>
										<text class="item-value">{{ formatDate(detailUser?.last_login_date) }}</text>
									</view>
									<view class="detail-item">
										<text class="item-label">登录IP</text>
										<text class="item-value">{{ detailUser?.last_login_ip || '-' }}</text>
									</view>
								</view>
							</view>
							
							<!-- 任务统计 -->
							<view class="detail-section">
								<view class="section-title">
									<text class="title-icon iconfont icon-renwu"></text>
									<text>任务统计</text>
								</view>
								<view class="section-content">
									<view v-if="loadingStats" class="loading-container">
										<text class="loading-text">加载中...</text>
									</view>
									<view v-else class="stats-grid">
										<view class="stat-item">
											<text class="stat-value">{{ userStats.taskPublished || 0 }}</text>
											<text class="stat-label">发布任务</text>
										</view>
										<view class="stat-item">
											<text class="stat-value">{{ userStats.taskReceived || 0 }}</text>
											<text class="stat-label">领取任务</text>
										</view>
										<view class="stat-item">
											<text class="stat-value">{{ userStats.taskProcessing || 0 }}</text>
											<text class="stat-label">进行中任务</text>
										</view>
										<view class="stat-item">
											<text class="stat-value">{{ userStats.taskCompleted || 0 }}</text>
											<text class="stat-label">完成任务</text>
										</view>
									</view>
								</view>
							</view>
							
							<!-- 圈子贡献 -->
							<view class="detail-section">
								<view class="section-title">
									<text class="title-icon iconfont icon-quanzi"></text>
									<text>圈子贡献</text>
								</view>
								<view class="section-content">
									<view v-if="loadingStats" class="loading-container">
										<text class="loading-text">加载中...</text>
									</view>
									<view v-else class="stats-grid">
										<view class="stat-item">
											<text class="stat-value">{{ userStats.postsPublished || 0 }}</text>
											<text class="stat-label">发帖数</text>
										</view>
										<view class="stat-item">
											<text class="stat-value">{{ userStats.commentsPublished || 0 }}</text>
											<text class="stat-label">评论数</text>
										</view>
										<view class="stat-item">
											<text class="stat-value">{{ userStats.likesReceived || 0 }}</text>
											<text class="stat-label">获赞数</text>
										</view>
										<view class="stat-item">
											<text class="stat-value">{{ userStats.myLikes || 0 }}</text>
											<text class="stat-label">我的点赞</text>
										</view>
									</view>
								</view>
							</view>
							
							<!-- 活动中心 -->
							<view class="detail-section">
								<view class="section-title">
									<text class="title-icon iconfont icon-huodong"></text>
									<text>活动中心</text>
								</view>
								<view class="section-content">
									<view v-if="loadingStats" class="loading-container">
										<text class="loading-text">加载中...</text>
									</view>
									<view v-else class="stats-grid stats-grid-2">
										<view class="stat-item">
											<text class="stat-value">{{ userStats.activitiesPublished || 0 }}</text>
											<text class="stat-label">发布活动</text>
										</view>
										<view class="stat-item">
											<text class="stat-value">{{ userStats.activitiesParticipated || 0 }}</text>
											<text class="stat-label">参与活动</text>
										</view>
									</view>
								</view>
							</view>
							
							<!-- 违规记录 -->
							<view class="detail-section" v-if="detailUser?.violation_records && detailUser.violation_records.length > 0">
								<view class="section-title">
									<text class="title-icon iconfont icon-weiguichuli"></text>
									<text>违规记录 ({{ detailUser.violation_records.length }})</text>
								</view>
								<view class="section-content">
									<view class="violation-list">
										<view class="violation-item" v-for="(record, index) in detailUser.violation_records" :key="index">
											<view class="violation-header">
												<text class="violation-type">{{ record.type }}</text>
												<text class="violation-time">{{ formatDate(record.mark_time) }}</text>
											</view>
											<view class="violation-reason" v-if="record.reason">{{ record.reason }}</view>
											<view class="violation-marker">标记人: {{ record.marker }}</view>
										</view>
									</view>
								</view>
							</view>
							
							<view class="detail-section" v-else>
								<view class="section-title">
									<text class="title-icon iconfont icon-weiguichuli"></text>
									<text>违规记录</text>
								</view>
								<view class="section-content">
									<view class="no-data">暂无违规记录</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 创建/编辑用户对话框 -->
			<view v-if="showDialog" class="simple-modal">
				<view class="modal-mask" @click="hideDialog"></view>
				<view class="simple-popup">
					<view class="popup-header">
						<text class="popup-title">{{ dialogMode === 'create' ? '创建管理员用户' : '编辑用户信息' }}</text>
						<text class="popup-close" @click="hideDialog">×</text>
					</view>
					
					<view class="form-container">
						<view class="form-item">
							<text class="label">用户名<text class="required">*</text></text>
							<input 
								class="simple-input" 
								:class="{ 'input-error': formErrors.username }"
								:value="userForm.username"
								placeholder="请输入用户名（3-20个字符）"
								:disabled="dialogMode === 'edit'"
								@input="onUsernameInput"
								@blur="validateUsername" />
							<text v-if="formErrors.username" class="error-text">{{ formErrors.username }}</text>
						</view>
						
						<view class="form-item">
							<text class="label">密码<text v-if="dialogMode === 'create'" class="required">*</text></text>
							<input 
								class="simple-input" 
								:class="{ 'input-error': formErrors.password }"
								type="password"
								:value="userForm.password"
								:placeholder="dialogMode === 'create' ? '请输入密码（至少6位）' : '留空则不修改密码'"
								@input="onPasswordInput"
								@blur="validatePassword" />
							<text v-if="formErrors.password" class="error-text">{{ formErrors.password }}</text>
						</view>
						
						<view class="form-item">
							<text class="label">昵称</text>
							<input 
								class="simple-input" 
								:class="{ 'input-error': formErrors.nickname }"
								:value="userForm.nickname"
								placeholder="请输入昵称（选填）"
								@input="onNicknameInput"
								@blur="validateNickname" />
							<text v-if="formErrors.nickname" class="error-text">{{ formErrors.nickname }}</text>
						</view>
						
						<view class="form-item">
							<text class="label">邮箱</text>
							<input 
								class="simple-input" 
								:class="{ 'input-error': formErrors.email }"
								:value="userForm.email"
								placeholder="请输入邮箱（选填）"
								@input="onEmailInput"
								@blur="validateEmail" />
							<text v-if="formErrors.email" class="error-text">{{ formErrors.email }}</text>
						</view>
						
					<view class="form-item">
						<text class="label">手机号</text>
						<input 
							class="simple-input" 
							:class="{ 'input-error': formErrors.mobile }"
							:value="userForm.mobile"
							placeholder="请输入手机号（选填）"
							@input="onMobileInput"
							@blur="validateMobile" />
						<text v-if="formErrors.mobile" class="error-text">{{ formErrors.mobile }}</text>
					</view>
				</view>
					
					<view class="form-actions">
						<button class="cancel-btn" @click="hideDialog">取消</button>
						<button class="submit-btn" @click="submitForm" :disabled="submitting">
							{{ submitting ? (dialogMode === 'create' ? '创建中...' : '更新中...') : (dialogMode === 'create' ? '创建用户' : '保存修改') }}
						</button>
					</view>
				</view>
			</view>
		</view>
	</AdminLayout>
</template>

<script>
import AdminLayout from '@/components/AdminLayout.vue'
export default {
	components: { AdminLayout },
	data() {
		return {
			keyword: '', // 保留原有的实时搜索关键词
			searchKeyword: '', // 搜索框输入的关键词
			userList: [], // 所有用户列表
			filteredUserList: [], // 搜索过滤后的用户列表
			loading: false,
			searching: false, // 搜索状态
			isSearching: false, // 是否处于搜索模式
			roleFilter: 'all', // 角色筛选：'all', 'admin', 'user'
			statusFilter: 'all', // 状态筛选：'all', 'active', 'inactive'
			violationFilter: 'all', // 违规筛选：'all', 'none', 'has'
			showDialog: false,
			dialogMode: 'create', // 'create' or 'edit'
			formData: {
				username: '',
				password: '',
				nickname: '',
				email: '',
				mobile: ''
			},
			userForm: {
				username: '',
				password: '',
				nickname: '',
				email: '',
				mobile: ''
			},
			formErrors: {
				username: '',
				password: '',
				nickname: '',
				email: '',
				mobile: ''
			},
			submitting: false,
			editingUser: null,
			// 违规标记相关
			showViolationDialog: false,
			violationUser: null,
			violationForm: {
				type: '',
				reason: ''
			},
			violationTypes: ['恶意取消任务', '虚假交易行为', '违反平台规则', '收到多次投诉', '其他违规'],
			showViolationDropdown: false,
			// 用户详情相关
			showDetailDialog: false,
			drawerClosing: false,
			detailUser: null,
			userStats: {
				// 任务统计
				taskPublished: 0,
				taskReceived: 0,
				taskProcessing: 0,
				taskCompleted: 0,
				// 圈子统计
				postsPublished: 0,
				commentsPublished: 0,
				likesReceived: 0,
				myLikes: 0,
				// 活动统计
				activitiesPublished: 0,
				activitiesParticipated: 0
			},
			loadingStats: false
		}
	},
	computed: {
		// 显示的用户列表：搜索模式下显示搜索结果，否则显示所有用户
		displayUsers() {
			return this.isSearching ? this.filteredUserList : this.userList;
		},
		// 实时搜索（保留原有功能）+ 角色筛选 + 状态筛选 + 违规筛选
		filteredUsers() {
			let users = this.displayUsers;
			
			// 应用角色筛选
			if (this.roleFilter === 'admin') {
				users = users.filter(user => this.isUserAdmin(user));
			} else if (this.roleFilter === 'user') {
				users = users.filter(user => !this.isUserAdmin(user));
			}
			
			// 应用状态筛选
			if (this.statusFilter === 'active') {
				users = users.filter(user => user.status === 0);
			} else if (this.statusFilter === 'inactive') {
				users = users.filter(user => user.status !== 0);
			}
			
			// 应用违规筛选
			if (this.violationFilter === 'none') {
				users = users.filter(user => !user.violation_count || user.violation_count === 0);
			} else if (this.violationFilter === 'has') {
				users = users.filter(user => user.violation_count && user.violation_count > 0);
			}
			
			// 应用关键词搜索
			if (this.keyword) {
				users = users.filter(user => 
					this.safeStringIncludes(user.username, this.keyword) || 
					this.safeStringIncludes(user.nickname, this.keyword)
				);
			}
			
			return users;
		},
		// 统计数据基于当前显示的用户列表
		adminCount() {
			return this.displayUsers.filter(user => this.isUserAdmin(user)).length;
		},
		normalUserCount() {
			return this.displayUsers.filter(user => !this.isUserAdmin(user)).length;
		},
		activeCount() {
			return this.displayUsers.filter(user => user.status === 0).length;
		},
		inactiveCount() {
			return this.displayUsers.filter(user => user.status !== 0).length;
		},
		noViolationCount() {
			return this.displayUsers.filter(user => !user.violation_count || user.violation_count === 0).length;
		},
		hasViolationCount() {
			return this.displayUsers.filter(user => user.violation_count && user.violation_count > 0).length;
		},
		// 总用户数显示
		totalUserCount() {
			return this.displayUsers.length;
		}
	},
	watch: {
		userForm: {
			handler(newVal) {
				console.log('userForm 变化:', newVal);
			},
			deep: true
		},
		showDialog(newVal) {
			if (newVal) {
				console.log('对话框显示，当前表单数据:', this.userForm);
			}
		}
	},
	onLoad() {
		this.loadUsers();
	},
	methods: {
		// 安全的字符串包含检查
		safeStringIncludes(str, searchTerm) {
			return str && typeof str === 'string' && str.toLowerCase().includes(searchTerm.toLowerCase());
		},
		
		// 安全的角色检查
		isUserAdmin(user) {
			return user.role && Array.isArray(user.role) && user.role.includes('admin');
		},
		
		async loadUsers() {
			this.loading = true;
			try {
				const res = await uniCloud.callFunction({
					name: 'initAdmin',
					data: {
						action: 'listUsers'
					}
				});
				
				if (res.result && res.result.code === 0) {
					this.userList = res.result.data || [];
					// 如果不在搜索模式，清空搜索结果
					if (!this.isSearching) {
						this.filteredUserList = [];
					}
				} else {
					uni.showToast({ title: res.result?.msg || '获取用户列表失败', icon: 'none' });
				}
			} catch (e) {
				console.error('获取用户列表失败:', e);
				uni.showToast({ title: '获取用户列表失败', icon: 'none' });
			} finally {
				this.loading = false;
			}
		},
		
		// 执行搜索
		async performSearch() {
			if (!this.searchKeyword.trim()) {
				uni.showToast({ title: '请输入搜索关键词', icon: 'none' });
				return;
			}
			
			this.searching = true;
			
			try {
				console.log('执行搜索:', this.searchKeyword);
				
				// 在本地用户列表中搜索
				const keyword = this.searchKeyword.trim();
				const searchResults = this.userList.filter(user => 
					this.safeStringIncludes(user.username, keyword) || 
					this.safeStringIncludes(user.nickname, keyword) ||
					this.safeStringIncludes(user.email, keyword) ||
					(user.mobile && user.mobile.toString().toLowerCase().includes(keyword.toLowerCase()))
				);
				
				this.filteredUserList = searchResults;
				this.isSearching = true;
				
				if (searchResults.length === 0) {
					uni.showToast({ title: '未找到匹配的用户', icon: 'none' });
				} else {
					uni.showToast({ title: `找到 ${searchResults.length} 个用户`, icon: 'success' });
				}
				
			} catch (e) {
				console.error('搜索失败:', e);
				uni.showToast({ title: '搜索失败', icon: 'none' });
			} finally {
				this.searching = false;
			}
		},
		
		// 清空搜索
		clearSearch() {
			this.searchKeyword = '';
			this.filteredUserList = [];
			this.isSearching = false;
			this.keyword = ''; // 同时清空实时搜索
			this.roleFilter = 'all'; // 清空角色筛选
			this.statusFilter = 'all'; // 清空状态筛选
			this.violationFilter = 'all'; // 清空违规筛选
			uni.showToast({ title: '已清空搜索和筛选', icon: 'success' });
		},
		
		// 按角色筛选
		filterByRole(role) {
			this.roleFilter = role;
			const roleText = role === 'all' ? '全部用户' : role === 'admin' ? '管理员' : '普通用户';
			uni.showToast({ title: `角色筛选: ${roleText}`, icon: 'success' });
		},
		
		// 按状态筛选
		filterByStatus(status) {
			this.statusFilter = status;
			const statusText = status === 'all' ? '全部' : status === 'active' ? '正常' : '禁用';
			uni.showToast({ title: `状态筛选: ${statusText}`, icon: 'success' });
		},
		
		// 按违规情况筛选
		filterByViolation(violation) {
			this.violationFilter = violation;
			const violationText = violation === 'all' ? '全部' : violation === 'none' ? '无违规' : '有违规';
			uni.showToast({ title: `违规筛选: ${violationText}`, icon: 'success' });
		},
		
		showCreateDialog() {
			console.log('显示创建对话框');
			
			this.dialogMode = 'create';
			this.editingUser = null;
			
			// 重置表单数据
			this.userForm = {
				username: '',
				password: '',
				nickname: '',
				email: '',
				mobile: ''
			};
			
			// 重置错误信息
			this.formErrors = {
				username: '',
				password: '',
				nickname: '',
				email: '',
				mobile: ''
			};
			
			this.showDialog = true;
		},
		
		editUser(user) {
			console.log('编辑用户数据:', user);
			
			this.dialogMode = 'edit';
			this.editingUser = user;
			
			// 设置表单数据
			this.userForm = {
				username: user.username || '',
				password: '',
				nickname: user.nickname || '',
				email: user.email || '',
				mobile: user.mobile || ''
			};
			
			// 重置错误信息
			this.formErrors = {
				username: '',
				password: '',
				nickname: '',
				email: '',
				mobile: ''
			};
			
			console.log('当前表单数据:', this.userForm);
			
			this.showDialog = true;
		},
		
		
		hideDialog() {
			this.showDialog = false;
			this.userForm = {
				username: '',
				password: '',
				nickname: '',
				email: '',
				mobile: ''
			};
			this.editingUser = null;
		},
		
		resetForm() {
			this.userForm = {
				username: '',
				password: '',
				nickname: '',
				email: '',
				mobile: ''
			};
		},
		
		async submitForm() {
			// 先验证表单
			if (!this.validateForm()) {
				// 找到第一个错误并提示
				const errors = this.formErrors;
				const firstError = errors.username || errors.password || errors.nickname || errors.email || errors.mobile;
				if (firstError) {
					uni.showToast({ title: firstError, icon: 'none', duration: 2000 });
				}
				return;
			}
			
			this.submitting = true;
			
			try {
				if (this.dialogMode === 'create') {
					// 创建用户
					const res = await uniCloud.callFunction({
						name: 'initAdmin',
						data: {
							action: 'createAdmin',
							username: this.userForm.username,
							password: this.userForm.password,
							nickname: this.userForm.nickname,
							email: this.userForm.email,
							mobile: this.userForm.mobile
						}
					});
					
					if (res.result && res.result.code === 0) {
						uni.showToast({ title: '创建成功', icon: 'success' });
						this.hideDialog();
						this.loadUsers();
					} else {
						uni.showToast({ title: res.result?.msg || '创建失败', icon: 'none' });
					}
				} else {
					// 更新用户
					const updates = {
						nickname: this.userForm.nickname,
						email: this.userForm.email,
						mobile: this.userForm.mobile
					};
					
					// 如果输入了新密码，则更新密码
					if (this.userForm.password) {
						updates.password = this.userForm.password;
					}
					
					const res = await uniCloud.callFunction({
						name: 'initAdmin',
						data: {
							action: 'updateUser',
							userId: this.editingUser._id,
							updates: updates
						}
					});
					
					if (res.result && res.result.code === 0) {
						uni.showToast({ title: '更新成功', icon: 'success' });
						this.hideDialog();
						this.loadUsers();
					} else {
						uni.showToast({ title: res.result?.msg || '更新失败', icon: 'none' });
					}
				}
			} catch (e) {
				console.error('操作失败:', e);
				uni.showToast({ title: '操作失败', icon: 'none' });
			} finally {
				this.submitting = false;
			}
		},
		
		async toggleStatus(user) {
			try {
				const newStatus = user.status === 0 ? 1 : 0;
				const res = await uniCloud.callFunction({
					name: 'initAdmin',
					data: {
						action: 'updateUser',
						userId: user._id,
						updates: { status: newStatus }
					}
				});
				
				if (res.result && res.result.code === 0) {
					uni.showToast({ title: newStatus === 0 ? '已启用' : '已禁用', icon: 'success' });
					this.loadUsers();
				} else {
					uni.showToast({ title: res.result?.msg || '操作失败', icon: 'none' });
				}
			} catch (e) {
				console.error('切换状态失败:', e);
				uni.showToast({ title: '操作失败', icon: 'none' });
			}
		},
		
		async deleteUser(user) {
			uni.showModal({
				title: '确认删除',
				content: `确定要删除用户 "${user.username}" 吗？此操作不可恢复！`,
				success: async (res) => {
					if (res.confirm) {
						try {
							const deleteRes = await uniCloud.callFunction({
								name: 'initAdmin',
								data: {
									action: 'deleteUser',
									userId: user._id
								}
							});
							
							if (deleteRes.result && deleteRes.result.code === 0) {
								uni.showToast({ title: '删除成功', icon: 'success' });
								this.loadUsers();
							} else {
								uni.showToast({ title: deleteRes.result?.msg || '删除失败', icon: 'none' });
							}
						} catch (e) {
							console.error('删除用户失败:', e);
							uni.showToast({ title: '删除失败', icon: 'none' });
						}
					}
				}
			});
		},
		
		formatDate(timestamp) {
			if (!timestamp) return '-';
			const date = new Date(timestamp);
			return date.toLocaleString('zh-CN');
		},
		
		formatDateShort(timestamp) {
			if (!timestamp) return '-';
			const date = new Date(timestamp);
			const now = new Date();
			const diffTime = now - date;
			const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
			
			if (diffDays === 0) {
				return '今天';
			} else if (diffDays === 1) {
				return '昨天';
			} else if (diffDays < 7) {
				return `${diffDays}天前`;
			} else {
				return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });
			}
		},
		
		getAvatarText(username) {
			if (!username) return '?';
			// 如果是中文，取第一个字符
			if (/[\u4e00-\u9fa5]/.test(username)) {
				return username.charAt(0);
			}
			// 如果是英文，取前两个字母大写
			return username.substring(0, 2).toUpperCase();
		},
		
		// 处理各个字段的输入
		onUsernameInput(event) {
			const value = event.detail.value;
			console.log('用户名输入:', value);
			this.userForm.username = value;
			// 输入时清除错误提示
			if (this.formErrors.username) {
				this.formErrors.username = '';
			}
		},
		
		onPasswordInput(event) {
			const value = event.detail.value;
			console.log('密码输入:', value);
			this.userForm.password = value;
			// 输入时清除错误提示
			if (this.formErrors.password) {
				this.formErrors.password = '';
			}
		},
		
		onNicknameInput(event) {
			const value = event.detail.value;
			console.log('昵称输入:', value);
			this.userForm.nickname = value;
			// 输入时清除错误提示
			if (this.formErrors.nickname) {
				this.formErrors.nickname = '';
			}
		},
		
		onEmailInput(event) {
			const value = event.detail.value;
			console.log('邮箱输入:', value);
			this.userForm.email = value;
			// 输入时清除错误提示
			if (this.formErrors.email) {
				this.formErrors.email = '';
			}
		},
		
		onMobileInput(event) {
			const value = event.detail.value;
			console.log('手机号输入:', value);
			this.userForm.mobile = value;
			// 输入时清除错误提示
			if (this.formErrors.mobile) {
				this.formErrors.mobile = '';
			}
		},
		
		// 表单验证方法
		validateUsername() {
			const username = this.userForm.username.trim();
			if (!username) {
				this.formErrors.username = '请输入用户名';
				return false;
			}
			if (username.length < 3 || username.length > 20) {
				this.formErrors.username = '用户名长度应为3-20个字符';
				return false;
			}
			if (!/^[a-zA-Z0-9_]+$/.test(username)) {
				this.formErrors.username = '用户名只能包含字母、数字和下划线';
				return false;
			}
			this.formErrors.username = '';
			return true;
		},
		
		validatePassword() {
			// 编辑模式下密码可以为空
			if (this.dialogMode === 'edit' && !this.userForm.password) {
				this.formErrors.password = '';
				return true;
			}
			
			const password = this.userForm.password;
			if (!password) {
				this.formErrors.password = '请输入密码';
				return false;
			}
			if (password.length < 6) {
				this.formErrors.password = '密码长度至少为6位';
				return false;
			}
			if (password.length > 20) {
				this.formErrors.password = '密码长度不能超过20位';
				return false;
			}
			this.formErrors.password = '';
			return true;
		},
		
		validateNickname() {
			const nickname = this.userForm.nickname.trim();
			if (nickname && nickname.length > 20) {
				this.formErrors.nickname = '昵称长度不能超过20个字符';
				return false;
			}
			this.formErrors.nickname = '';
			return true;
		},
		
		validateEmail() {
			const email = this.userForm.email.trim();
			if (!email) {
				this.formErrors.email = '';
				return true;
			}
			const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
			if (!emailRegex.test(email)) {
				this.formErrors.email = '请输入有效的邮箱地址';
				return false;
			}
			this.formErrors.email = '';
			return true;
		},
		
		validateMobile() {
			const mobile = this.userForm.mobile.trim();
			if (!mobile) {
				this.formErrors.mobile = '';
				return true;
			}
			const mobileRegex = /^1[3-9]\d{9}$/;
			if (!mobileRegex.test(mobile)) {
				this.formErrors.mobile = '请输入有效的手机号码';
				return false;
			}
			this.formErrors.mobile = '';
			return true;
		},
		
		// 验证整个表单
		validateForm() {
			const isUsernameValid = this.validateUsername();
			const isPasswordValid = this.validatePassword();
			const isNicknameValid = this.validateNickname();
			const isEmailValid = this.validateEmail();
			const isMobileValid = this.validateMobile();
			
			return isUsernameValid && isPasswordValid && isNicknameValid && isEmailValid && isMobileValid;
		},
		
		// 获取违规等级样式
		getViolationLevel(count) {
			if (!count || count === 0) return '';
			if (count >= 5) return 'violation-high';
			if (count >= 3) return 'violation-medium';
			return 'violation-low';
		},
		
		// 获取违规文本
		getViolationText(count) {
			if (!count || count === 0) return '';
			if (count >= 5) return '高风险';
			if (count >= 3) return '中风险';
			return '低风险';
		},
		
		// 标记违规
		markViolation(user) {
			console.log('标记违规:', user);
			this.violationUser = user;
			this.violationForm = {
				type: '',
				reason: ''
			};
			this.showViolationDialog = true;
		},
		
		// 隐藏违规对话框
		hideViolationDialog() {
			this.showViolationDialog = false;
			this.showViolationDropdown = false;
			this.violationUser = null;
			this.violationForm = {
				type: '',
				reason: ''
			};
		},
		
		// 切换违规类型下拉框
		toggleViolationDropdown() {
			this.showViolationDropdown = !this.showViolationDropdown;
		},
		
		// 选择违规类型
		selectViolationType(type) {
			this.violationForm.type = type;
			this.showViolationDropdown = false;
		},
		
		// 关闭下拉框
		closeDropdown() {
			this.showViolationDropdown = false;
		},
		
		// 违规说明输入
		onViolationReasonInput(e) {
			this.violationForm.reason = e.detail.value;
		},
		
		// 提交违规标记
		async submitViolation() {
			if (!this.violationForm.type) {
				uni.showToast({ title: '请选择违规类型', icon: 'none' });
				return;
			}
			
			this.submitting = true;
			
			try {
				// 构建违规记录
				const violationRecord = {
					type: this.violationForm.type,
					reason: this.violationForm.reason || '',
					mark_time: Date.now(),
					marker: uni.getStorageSync('userInfo')?.username || 'admin'
				};
				
				// 获取当前违规记录和次数
				const currentViolationRecords = this.violationUser.violation_records || [];
				const currentViolationCount = this.violationUser.violation_count || 0;
				
				console.log('当前违规信息:', {
					userId: this.violationUser._id,
					username: this.violationUser.username,
					currentCount: currentViolationCount,
					newCount: currentViolationCount + 1
				});
				
				// 更新用户违规信息
				const res = await uniCloud.callFunction({
					name: 'initAdmin',
					data: {
						action: 'updateUser',
						userId: this.violationUser._id,
						updates: {
							violation_count: currentViolationCount + 1,
							violation_records: [...currentViolationRecords, violationRecord]
						}
					}
				});
				
				if (res.result && res.result.code === 0) {
					uni.showToast({ title: '违规标记成功', icon: 'success' });
					this.hideViolationDialog();
					this.loadUsers();
				} else {
					uni.showToast({ title: res.result?.msg || '标记失败', icon: 'none' });
				}
			} catch (e) {
				console.error('标记违规失败:', e);
				uni.showToast({ title: '标记失败', icon: 'none' });
			} finally {
				this.submitting = false;
			}
		},
		
		// 查看用户详情
		viewUserDetail(user) {
			console.log('跳转到用户详情页:', user);
			// 跳转到用户详情页面，传递用户ID
			uni.navigateTo({
				url: `/pages/admin/users/detail?userId=${user._id}`
			});
		},
		
		// 查看违规记录
		viewViolations(user) {
			console.log('查看违规记录:', user);
			uni.navigateTo({
				url: `/pages/admin/users/violations?userId=${user._id}`
			});
		},
		
		// 加载用户统计数据
		async loadUserStats(userId) {
			this.loadingStats = true;
			
			try {
				const res = await uniCloud.callFunction({
					name: 'initAdmin',
					data: {
						action: 'getUserStats',
						userId: userId
					}
				});
				
				if (res.result && res.result.code === 0) {
					this.userStats = res.result.data || this.userStats;
				} else {
					console.error('获取用户统计失败:', res.result?.msg);
				}
			} catch (e) {
				console.error('获取用户统计失败:', e);
			} finally {
				this.loadingStats = false;
			}
		},
		
		// 隐藏用户详情对话框
		hideDetailDialog() {
			// 先触发关闭动画
			this.drawerClosing = true;
			
			// 等待动画完成后再隐藏
			setTimeout(() => {
				this.showDetailDialog = false;
				this.drawerClosing = false;
				this.detailUser = null;
				this.userStats = {
					taskPublished: 0,
					taskReceived: 0,
					taskProcessing: 0,
					taskCompleted: 0,
					postsPublished: 0,
					commentsPublished: 0,
					likesReceived: 0,
					myLikes: 0,
					activitiesPublished: 0,
					activitiesParticipated: 0
				};
			}, 300);
		}
	}
}
</script>

<style scoped>
/* 页面主体 */
.page {
	padding: 32rpx;
	background: #f8fafc;
	min-height: 100vh;
}

/* 页面头部 */
.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32rpx;
	padding: 0 8rpx;
}

.header-info .page-title {
	font-size: 48rpx;
	font-weight: 700;
	color: #1a202c;
	margin-bottom: 8rpx;
	display: block;
}

.header-info .page-subtitle {
	font-size: 28rpx;
	color: #718096;
	display: block;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 24rpx;
}

.search-container {
	display: flex;
	align-items: center;
	gap: 12rpx;
	background: #fff;
	border-radius: 20rpx;
	padding: 8rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	border: 1rpx solid #f1f5f9;
	transition: all 0.3s ease;
	min-width: 400rpx;
}

.search-container:focus-within {
	border-color: #e2e8f0;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
}

.search-box {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1;
	padding: 0 20rpx;
}

.search-icon {
	margin-right: 12rpx;
	font-size: 32rpx;
	color: #64748b;
	transition: color 0.3s ease;
}

.search-icon.iconfont {
	font-size: 28rpx;
}

.search-input {
	flex: 1;
	height: 72rpx;
	font-size: 28rpx;
	color: #1e293b;
	background: transparent;
	border: none;
	outline: none;
}

.search-input::placeholder {
	color: #94a3b8;
}

.btn-primary {
	display: flex;
	align-items: center;
	gap: 8rpx;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: #fff;
	border: none;
	border-radius: 16rpx;
	padding: 20rpx 32rpx;
	font-size: 28rpx;
	font-weight: 500;
	transition: all 0.2s ease;
	white-space: nowrap;
	box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
}

.btn-primary:hover {
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
	transform: translateY(-1rpx);
	box-shadow: 0 6rpx 16rpx rgba(37, 99, 235, 0.4);
}

.btn-primary:active {
	transform: translateY(0);
}

.btn-icon {
	font-size: 32rpx;
}

.btn-icon.iconfont {
	font-size: 28rpx;
}

/* 搜索按钮样式 */
.search-btn {
	display: flex;
	align-items: center;
	gap: 6rpx;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: #fff;
	border: none;
	border-radius: 16rpx;
	padding: 20rpx 28rpx;
	font-size: 26rpx;
	font-weight: 500;
	transition: all 0.2s ease;
	white-space: nowrap;
	box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.25);
}

.search-btn:hover:not(:disabled) {
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
	transform: translateY(-1rpx);
	box-shadow: 0 4rpx 12rpx rgba(37, 99, 235, 0.35);
}

.search-btn:active:not(:disabled) {
	transform: translateY(0);
}

.search-btn:disabled {
	background: #94a3b8;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.clear-btn {
	display: flex;
	align-items: center;
	gap: 6rpx;
	background: #64748b;
	color: #fff;
	border: none;
	border-radius: 16rpx;
	padding: 20rpx 28rpx;
	font-size: 26rpx;
	font-weight: 500;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.clear-btn:hover {
	background: #475569;
	transform: translateY(-1rpx);
}

.clear-btn:active {
	transform: translateY(0);
}

/* 统计卡片 */
.stats-cards {
	display: flex;
	gap: 24rpx;
	margin-bottom: 24rpx;
	align-items: center;
}

.stat-card {
	flex: 1;
	background: #fff;
	border-radius: 20rpx;
	padding: 32rpx;
	text-align: center;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	border: 2rpx solid #f1f5f9;
	transition: all 0.3s ease;
	cursor: pointer;
}

.stat-card:hover {
	transform: translateY(-4rpx);
	box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.1);
}

.stat-card-active {
	border-color: #3b82f6;
	box-shadow: 0 4rpx 16rpx rgba(59, 130, 246, 0.3);
	background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.stat-card-active .stat-number {
	color: #3b82f6;
}

.stat-number {
	font-size: 56rpx;
	font-weight: 800;
	color: #2563eb;
	margin-bottom: 8rpx;
}

.stat-label {
	font-size: 26rpx;
	color: #64748b;
	font-weight: 500;
}

/* 筛选工具栏 */
.filter-toolbar {
	display: flex;
	align-items: center;
	gap: 24rpx;
	flex: 1;
	flex-wrap: wrap;
	min-width: 0;
}

.filter-group {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.filter-group-label {
	display: flex;
	align-items: center;
	gap: 8rpx;
	font-size: 26rpx;
	font-weight: 600;
	color: #475569;
	white-space: nowrap;
	padding-right: 8rpx;
}

.filter-group-label .iconfont {
	font-size: 24rpx;
	color: #64748b;
}

.filter-buttons {
	display: flex;
	gap: 8rpx;
	flex-wrap: wrap;
}

.filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 8rpx;
	padding: 12rpx 20rpx;
	background: #fff;
	color: #64748b;
	border: 2rpx solid #cbd5e1;
	border-radius: 12rpx;
	font-size: 24rpx;
	font-weight: 500;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.filter-btn .iconfont {
	font-size: 22rpx;
}

.filter-btn:hover {
	background: #f1f5f9;
	border-color: #94a3b8;
	color: #475569;
	transform: translateY(-1rpx);
}

.filter-btn-active {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: #fff;
	border-color: #3b82f6;
	font-weight: 600;
	box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
}

.filter-btn-active:hover {
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
	border-color: #2563eb;
	transform: translateY(-1rpx);
	box-shadow: 0 6rpx 16rpx rgba(37, 99, 235, 0.4);
}

/* 不同颜色的筛选按钮 */
.filter-btn-success:not(.filter-btn-active):hover {
	background: #f0fdf4;
	border-color: #86efac;
	color: #16a34a;
}

.filter-btn-success.filter-btn-active {
	background: #16a34a;
	border-color: #16a34a;
	box-shadow: 0 4rpx 12rpx rgba(22, 163, 74, 0.3);
}

.filter-btn-success.filter-btn-active:hover {
	background: #15803d;
	border-color: #15803d;
}

.filter-btn-danger:not(.filter-btn-active):hover {
	background: #fef2f2;
	border-color: #fca5a5;
	color: #dc2626;
}

.filter-btn-danger.filter-btn-active {
	background: #dc2626;
	border-color: #dc2626;
	box-shadow: 0 4rpx 12rpx rgba(220, 38, 38, 0.3);
}

.filter-btn-danger.filter-btn-active:hover {
	background: #b91c1c;
	border-color: #b91c1c;
}

.filter-btn-warning:not(.filter-btn-active):hover {
	background: #fff7ed;
	border-color: #fdba74;
	color: #ea580c;
}

.filter-btn-warning.filter-btn-active {
	background: #ea580c;
	border-color: #ea580c;
	box-shadow: 0 4rpx 12rpx rgba(234, 88, 12, 0.3);
}

.filter-btn-warning.filter-btn-active:hover {
	background: #c2410c;
	border-color: #c2410c;
}

/* 状态点 */
.status-dot {
	display: inline-block;
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
	margin-right: 4rpx;
}

.dot-active {
	background: #16a34a;
}

.dot-inactive {
	background: #dc2626;
}

.filter-btn-active .status-dot {
	background: #fff;
}

.filter-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36rpx;
	height: 32rpx;
	padding: 0 8rpx;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 8rpx;
	font-size: 20rpx;
	font-weight: 700;
}

.filter-btn-active .filter-count {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}

.filter-divider {
	width: 2rpx;
	height: 48rpx;
	background: #e2e8f0;
}

/* 用户表格容器 */
.user-table-container {
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
	border: 2rpx solid #f1f5f9;
	overflow: hidden;
}

.table-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx 32rpx;
	border-bottom: 2rpx solid #e2e8f0;
	gap: 24rpx;
	flex-wrap: wrap;
	background: #f8fafc;
}

.table-title {
	font-size: 36rpx;
	font-weight: 700;
	color: #1a202c;
	white-space: nowrap;
	flex-shrink: 0;
}

.table-actions {
	display: flex;
	gap: 12rpx;
	flex-shrink: 0;
}

.btn-secondary {
	display: flex;
	align-items: center;
	gap: 8rpx;
	background: #fff;
	color: #64748b;
	border: 2rpx solid #cbd5e1;
	border-radius: 12rpx;
	padding: 16rpx 24rpx;
	font-size: 26rpx;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.btn-secondary:hover {
	background: #f1f5f9;
	color: #475569;
	border-color: #cbd5e1;
	transform: translateY(-1rpx);
}

.btn-secondary:active {
	transform: translateY(0);
}

/* 用户表格 */
.user-table {
	width: 100%;
}

.table-row {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr 2fr;
	align-items: center;
	padding: 24rpx 32rpx;
	border-bottom: 2rpx solid #f8fafc;
	transition: all 0.3s ease;
}

.table-row:hover:not(.table-header-row) {
	background: #f8fafc;
}

.table-header-row {
	background: #f8fafc;
	font-weight: 600;
	color: #4a5568;
	font-size: 26rpx;
	border-bottom: 2rpx solid #e2e8f0;
}

.table-cell {
	padding: 0 8rpx;
	display: flex;
	align-items: center;
}

/* 违规情况列居中 */
.cell-violation {
	justify-content: center;
}

/* 用户信息 */
.user-info {
	display: flex;
	align-items: center;
	gap: 24rpx;
}

.user-avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: #fff;
	font-size: 28rpx;
	box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.3);
}

.user-details .username {
	font-size: 30rpx;
	font-weight: 600;
	color: #1a202c;
	margin-bottom: 4rpx;
}

.user-details .nickname {
	font-size: 24rpx;
	color: #718096;
}

/* 角色标签 */
.role-tags {
	display: flex;
	gap: 8rpx;
}

.role-tag {
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
	font-size: 22rpx;
	font-weight: 600;
}

.role-admin {
	background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
	color: #2563eb;
	border: 2rpx solid #93c5fd;
}

.role-user {
	background: #f8fafc;
	color: #64748b;
	border: 2rpx solid #cbd5e1;
}

/* 状态徽章 */
.status-badge {
	display: flex;
	align-items: center;
	gap: 12rpx;
	padding: 12rpx 20rpx;
	border-radius: 12rpx;
	font-size: 24rpx;
	font-weight: 600;
	width: fit-content;
}

.status-active {
	background: #f0fdf4;
	color: #16a34a;
	border: 2rpx solid #bbf7d0;
}

.status-inactive {
	background: #fef2f2;
	color: #dc2626;
	border: 2rpx solid #fecaca;
}

.status-dot {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
}

.status-active .status-dot {
	background: #16a34a;
}

.status-inactive .status-dot {
	background: #dc2626;
}

/* 时间信息 */
.time-info {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.time-item {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.time-label {
	font-size: 22rpx;
	color: #9ca3af;
	min-width: 60rpx;
}

.time-value {
	font-size: 24rpx;
	color: #374151;
	font-weight: 500;
}

/* 操作按钮 */
.action-buttons {
	display: flex;
	gap: 12rpx;
	justify-content: center;
}

.action-btn {
	width: 64rpx;
	height: 64rpx;
	border-radius: 12rpx;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	transition: all 0.3s ease;
}

.action-btn .btn-icon.iconfont {
	font-size: 24rpx;
}

.btn-edit {
	background: #eff6ff;
	color: #2563eb;
}

.btn-edit:hover {
	background: #dbeafe;
	transform: scale(1.1);
}

.btn-disable {
	background: #fef2f2;
	color: #dc2626;
}

.btn-disable:hover {
	background: #fee2e2;
	transform: scale(1.1);
}

.btn-enable {
	background: #f0fdf4;
	color: #16a34a;
}

.btn-enable:hover {
	background: #dcfce7;
	transform: scale(1.1);
}

.btn-delete {
	background: #fefbfb;
	color: #ef4444;
}

.btn-delete:hover {
	background: #fef2f2;
	transform: scale(1.1);
}

.btn-info {
	background: #ecfeff;
	color: #0891b2;
}

.btn-info:hover {
	background: #cffafe;
	transform: scale(1.1);
}

.btn-warning {
	background: #fff7ed;
	color: #ea580c;
}

.btn-warning:hover {
	background: #ffedd5;
	transform: scale(1.1);
}

.btn-violation {
	background: #fef3c7;
	color: #d97706;
}

.btn-violation:hover {
	background: #fde68a;
	transform: scale(1.1);
}

/* 违规信息样式 */
.violation-info {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 60rpx;
}

.violation-none {
	font-size: 24rpx;
	color: #9ca3af;
	text-align: center;
}

.violation-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rpx;
	padding: 12rpx 16rpx;
	border-radius: 12rpx;
	min-width: 100rpx;
}

.violation-high {
	background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
	border: 2rpx solid #fca5a5;
}

.violation-medium {
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	border: 2rpx solid #fcd34d;
}

.violation-low {
	background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
	border: 2rpx solid #6ee7b7;
}

.violation-count {
	font-size: 26rpx;
	font-weight: 700;
}

.violation-high .violation-count {
	color: #991b1b;
}

.violation-medium .violation-count {
	color: #92400e;
}

.violation-low .violation-count {
	color: #065f46;
}

.violation-label {
	font-size: 20rpx;
	font-weight: 600;
}

.violation-high .violation-label {
	color: #dc2626;
}

.violation-medium .violation-label {
	color: #d97706;
}

.violation-low .violation-label {
	color: #059669;
}

/* 违规对话框样式 */
.violation-user-info {
	background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
	padding: 24rpx;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
	border: 2rpx solid #cbd5e0;
	position: relative;
	z-index: 0;
}

.info-label {
	display: block;
	font-size: 22rpx;
	color: #64748b;
	margin-bottom: 8rpx;
}

.info-value {
	display: block;
	font-size: 30rpx;
	font-weight: 600;
	color: #1e293b;
	margin-bottom: 12rpx;
}

.info-current {
	display: block;
	font-size: 26rpx;
	color: #475569;
}

/* 自定义下拉选择框 */
.custom-select {
	padding: 24rpx 20rpx;
	border: 2rpx solid #e5e7eb;
	border-radius: 8rpx;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
}

.custom-select:hover {
	border-color: #cbd5e1;
	background: #f8fafc;
}

.custom-select:active {
	border-color: #3b82f6;
}

.select-text {
	flex: 1;
	font-size: 28rpx;
	color: #374151;
}

.select-text.placeholder {
	color: #9ca3af;
}

.select-arrow {
	font-size: 24rpx;
	color: #9ca3af;
	transition: transform 0.3s ease;
	margin-left: 12rpx;
}

.select-arrow.open {
	transform: rotate(180deg);
}

.dropdown-list {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8rpx);
	background: #fff;
	border: 2rpx solid #e5e7eb;
	border-radius: 8rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
	max-height: 400rpx;
	overflow-y: auto;
	z-index: 99999;
	animation: dropdownSlide 0.3s ease;
}

@keyframes dropdownSlide {
	from {
		opacity: 0;
		transform: translateY(-10rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.dropdown-item {
	padding: 24rpx 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 28rpx;
	color: #374151;
	border-bottom: 1rpx solid #f3f4f6;
}

.dropdown-item:last-child {
	border-bottom: none;
}

.dropdown-item:hover {
	background: #f8fafc;
}

.dropdown-item:active {
	background: #f1f5f9;
}

.dropdown-item.selected {
	background: #eff6ff;
	color: #3b82f6;
	font-weight: 600;
}

.check-icon {
	font-size: 32rpx;
	color: #3b82f6;
	font-weight: bold;
}

.textarea-input {
	width: 100%;
	min-height: 200rpx;
	padding: 20rpx;
	border: 2rpx solid #e5e7eb;
	border-radius: 8rpx;
	font-size: 28rpx;
	color: #374151;
	background: #fff;
	box-sizing: border-box;
}

.textarea-input:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 2rpx rgba(59, 130, 246, 0.2);
	outline: none;
}

/* 模态框样式 */
.modal-overlay {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.6);
	backdrop-filter: blur(8rpx);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.modal-container {
	width: 90%;
	max-width: 800rpx;
	background: #fff;
	border-radius: 24rpx;
	box-shadow: 0 20rpx 40rpx rgba(0,0,0,0.15);
	animation: slideUp 0.3s ease;
}

@keyframes slideUp {
	from { 
		opacity: 0;
		transform: translateY(40rpx) scale(0.95);
	}
	to { 
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40rpx;
	border-bottom: 2rpx solid #f1f5f9;
}

.modal-title {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.title-icon {
	font-size: 40rpx;
}

.title-icon.iconfont {
	font-size: 36rpx;
}

.title-text {
	font-size: 36rpx;
	font-weight: 700;
	color: #1a202c;
}

.modal-close {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	background: #f8fafc;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	color: #6b7280;
	transition: all 0.3s ease;
}

.modal-close:hover {
	background: #e5e7eb;
	transform: scale(1.1);
}

.modal-body {
	padding: 40rpx;
}

.form-grid {
	display: flex;
	flex-direction: column;
	gap: 32rpx;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
	pointer-events: auto;
}

.form-label {
	font-size: 28rpx;
	font-weight: 600;
	color: #374151;
}

.input-wrapper {
	position: relative;
}

.form-input {
	width: 100%;
	padding: 24rpx 20rpx;
	border: 2rpx solid #e5e7eb;
	border-radius: 16rpx;
	font-size: 28rpx;
	color: #374151;
	background: #fff;
	transition: all 0.3s ease;
	pointer-events: auto;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
}

.form-input:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 6rpx rgba(59, 130, 246, 0.15);
	outline: none;
}

.form-input:disabled {
	background-color: #f9fafb;
	color: #6b7280;
	cursor: not-allowed;
}

.modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 24rpx;
	padding: 40rpx;
	border-top: 2rpx solid #f1f5f9;
}

.btn-cancel {
	padding: 20rpx 40rpx;
	border: 2rpx solid #e5e7eb;
	background: #fff;
	color: #6b7280;
	border-radius: 16rpx;
	font-size: 28rpx;
	font-weight: 600;
	transition: all 0.3s ease;
}

.btn-cancel:hover {
	background: #f9fafb;
	border-color: #d1d5db;
}

.btn-submit {
	padding: 20rpx 40rpx;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: #fff;
	border: none;
	border-radius: 16rpx;
	font-size: 28rpx;
	font-weight: 600;
	box-shadow: 0 8rpx 16rpx rgba(59, 130, 246, 0.3);
	transition: all 0.3s ease;
}

.btn-submit:hover:not(:disabled) {
	transform: translateY(-2rpx);
	box-shadow: 0 12rpx 24rpx rgba(37, 99, 235, 0.4);
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.btn-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* 简单弹窗样式 */
.simple-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1;
}

.simple-popup {
	position: relative;
	width: 600rpx;
	max-width: 90vw;
	max-height: 90vh;
	background: #fff;
	border-radius: 12rpx;
	overflow: visible;
	z-index: 10001;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: column;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	background: #f8f9fa;
	border-bottom: 1rpx solid #e9ecef;
	border-radius: 12rpx 12rpx 0 0;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

.popup-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.popup-close {
	font-size: 40rpx;
	color: #666;
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.popup-close:hover {
	background: #e9ecef;
}

.form-container {
	padding: 30rpx;
	padding-bottom: 100rpx;
	flex: 1;
	overflow-y: auto;
	overflow-x: visible;
	min-height: 0;
	position: relative;
}

.form-item {
	margin-bottom: 30rpx;
	position: relative;
}

.form-item:last-child {
	margin-bottom: 0;
}

.label {
	display: block;
	margin-bottom: 10rpx;
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.required {
	color: #ef4444;
	margin-left: 4rpx;
	font-weight: 600;
}

.simple-input {
	width: 100%;
	height: 80rpx;
	padding: 0 20rpx;
	border: 2rpx solid #ddd;
	border-radius: 8rpx;
	font-size: 28rpx;
	background: #fff;
	box-sizing: border-box;
	outline: none;
	transition: all 0.3s ease;
}

.simple-input:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 2rpx rgba(59, 130, 246, 0.2);
}

.simple-input:disabled {
	background: #f5f5f5;
	color: #999;
	cursor: not-allowed;
}

.input-error {
	border-color: #ef4444 !important;
	background: #fef2f2;
}

.input-error:focus {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 2rpx rgba(239, 68, 68, 0.2) !important;
}

.error-text {
	display: block;
	margin-top: 8rpx;
	font-size: 24rpx;
	color: #ef4444;
	line-height: 1.5;
	animation: slideDown 0.3s ease;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-8rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 20rpx;
	padding: 30rpx;
	border-top: 1rpx solid #e9ecef;
	background: #f8f9fa;
	border-radius: 0 0 12rpx 12rpx;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

.cancel-btn, .submit-btn {
	padding: 16rpx 32rpx;
	border-radius: 8rpx;
	font-size: 28rpx;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
}

.cancel-btn {
	background: #6c757d;
	color: #fff;
}

.cancel-btn:hover {
	background: #5a6268;
}

.submit-btn {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: #fff;
	box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
}

.submit-btn:hover:not(:disabled) {
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
	box-shadow: 0 6rpx 16rpx rgba(37, 99, 235, 0.4);
}

.submit-btn:disabled {
	background: #ccc;
	cursor: not-allowed;
	box-shadow: none;
}

/* 响应式设计 */
@media (max-width: 900px) {
	.page {
		padding: 24rpx;
	}
	
	.page-header {
		flex-direction: column;
		align-items: stretch;
		gap: 24rpx;
	}
	
	.header-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 20rpx;
	}
	
	.search-container {
		min-width: auto;
		width: 100%;
		flex-wrap: wrap;
		padding: 12rpx;
	}
	
	.search-box {
		min-width: 200rpx;
	}
	
	.search-btn, .clear-btn {
		padding: 18rpx 24rpx;
		font-size: 24rpx;
	}
	
	.btn-primary {
		justify-content: center;
		width: 100%;
	}
	
	.stats-cards {
		flex-direction: column;
	}
	
	.table-header {
		flex-direction: column;
		align-items: stretch;
		gap: 16rpx;
		padding: 20rpx 16rpx;
	}
	
	.table-title {
		font-size: 32rpx;
	}
	
	.filter-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 16rpx;
	}
	
	.filter-group {
		flex-direction: column;
		align-items: stretch;
		gap: 12rpx;
	}
	
	.filter-group-label {
		padding-left: 8rpx;
	}
	
	.filter-buttons {
		width: 100%;
	}
	
	.filter-btn {
		flex: 1;
		justify-content: center;
		min-width: 0;
	}
	
	.filter-divider {
		width: 100%;
		height: 2rpx;
	}
	
	.table-actions {
		width: 100%;
	}
	
	.btn-secondary {
		width: 100%;
		justify-content: center;
	}
	
	.table-row {
		grid-template-columns: 1fr;
		gap: 16rpx;
		padding: 24rpx 16rpx;
	}
	
	.table-cell {
		padding: 8rpx 0;
	}
	
	.user-info {
		justify-content: flex-start;
	}
	
	.action-buttons {
		justify-content: flex-start;
	}
	
	.popup-content {
		width: 90vw;
	}
}

@media (max-width: 600px) {
	.search-container {
		flex-direction: column;
		gap: 16rpx;
		padding: 16rpx;
	}
	
	.search-box {
		width: 100%;
	}
	
	.search-btn, .clear-btn {
		width: 100%;
		justify-content: center;
	}
}

/* 用户详情抽屉样式 */
.drawer-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(71, 85, 105, 0.4);
	z-index: 10000;
	animation: fadeIn 0.3s ease;
	backdrop-filter: blur(2rpx);
}

@keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}

.drawer-overlay.overlay-closing {
	animation: fadeOut 0.3s ease forwards;
}

.drawer-container {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 800rpx;
	max-width: 85vw;
	background: #fff;
	box-shadow: -4rpx 0 32rpx rgba(71, 85, 105, 0.15);
	display: flex;
	flex-direction: column;
	animation: slideInRight 0.3s ease;
	z-index: 10001;
	border-left: 1rpx solid #e2e8f0;
}

@keyframes slideInRight {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0);
	}
}

@keyframes slideOutRight {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(100%);
	}
}

.drawer-container.drawer-closing {
	animation: slideOutRight 0.3s ease forwards;
}

.drawer-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40rpx 32rpx;
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
	color: #fff;
	flex-shrink: 0;
	border-bottom: 2rpx solid #93c5fd;
	box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.2);
}

.drawer-title {
	font-size: 36rpx;
	font-weight: 700;
	color: #fff;
}

.drawer-close {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	color: #fff;
	transition: all 0.3s ease;
}

.drawer-close:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: rotate(90deg);
}

.drawer-close .iconfont {
	font-size: 28rpx;
}

.drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 32rpx;
	background: #f8fafc;
}

/* 美化滚动条 */
.drawer-body::-webkit-scrollbar {
	width: 8rpx;
}

.drawer-body::-webkit-scrollbar-track {
	background: #f1f5f9;
}

.drawer-body::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4rpx;
}

.drawer-body::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}

.detail-user-header {
	display: flex;
	align-items: center;
	gap: 32rpx;
	padding: 32rpx;
	background: #fff;
	border-radius: 16rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	border: 2rpx solid #e2e8f0;
}

.detail-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: #fff;
	font-size: 48rpx;
	box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.4);
	flex-shrink: 0;
}

.detail-user-basic {
	flex: 1;
	min-width: 0;
}

.detail-username {
	font-size: 36rpx;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 8rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.detail-nickname {
	font-size: 26rpx;
	color: #64748b;
	margin-bottom: 12rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.detail-role-tag {
	display: inline-block;
	padding: 8rpx 20rpx;
	border-radius: 20rpx;
	font-size: 22rpx;
	font-weight: 600;
}

.detail-role-tag.role-admin {
	background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
	color: #2563eb;
	border: 2rpx solid #93c5fd;
}

.detail-role-tag.role-user {
	background: #f8fafc;
	color: #64748b;
	border: 2rpx solid #cbd5e1;
}

.detail-sections {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.detail-section {
	background: #f8fafc;
	border-radius: 16rpx;
	padding: 24rpx;
	border: 2rpx solid #e2e8f0;
}

.section-title {
	display: flex;
	align-items: center;
	gap: 12rpx;
	font-size: 32rpx;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 20rpx;
	padding-bottom: 16rpx;
	border-bottom: 2rpx solid #e2e8f0;
}

.title-icon {
	font-size: 32rpx;
	color: #64748b;
}

.section-content {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.detail-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16rpx 0;
	border-bottom: 1rpx solid #f1f5f9;
}

.detail-item:last-child {
	border-bottom: none;
}

.item-label {
	font-size: 26rpx;
	color: #64748b;
	font-weight: 500;
	min-width: 160rpx;
}

.item-value {
	font-size: 28rpx;
	color: #1e293b;
	font-weight: 600;
	text-align: right;
	flex: 1;
	word-break: break-all;
}

.status-badge-small {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
	font-size: 22rpx;
	font-weight: 600;
}

.status-dot-small {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
}

.status-active .status-dot-small {
	background: #16a34a;
}

.status-inactive .status-dot-small {
	background: #dc2626;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.stats-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24rpx;
	background: #fff;
	border-radius: 12rpx;
	border: 2rpx solid #e2e8f0;
	transition: all 0.3s ease;
}

.stat-item:hover {
	transform: translateY(-4rpx);
	box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
}

.stat-value {
	font-size: 48rpx;
	font-weight: 800;
	color: #3b82f6;
	margin-bottom: 8rpx;
}

.stat-label {
	font-size: 24rpx;
	color: #64748b;
	font-weight: 500;
}

.violation-list {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.violation-item {
	background: #fff;
	padding: 20rpx;
	border-radius: 12rpx;
	border: 2rpx solid #e2e8f0;
}

.violation-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12rpx;
}

.violation-type {
	font-size: 28rpx;
	font-weight: 600;
	color: #dc2626;
}

.violation-time {
	font-size: 22rpx;
	color: #64748b;
}

.violation-reason {
	font-size: 26rpx;
	color: #475569;
	margin-bottom: 12rpx;
	line-height: 1.6;
}

.violation-marker {
	font-size: 22rpx;
	color: #94a3b8;
}

.no-data {
	text-align: center;
	padding: 40rpx;
	font-size: 28rpx;
	color: #94a3b8;
}

/* 加载状态 */
.loading-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 60rpx 20rpx;
}

.loading-text {
	font-size: 28rpx;
	color: #64748b;
	animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

/* 抽屉响应式设计 */
@media (max-width: 900px) {
	.drawer-container {
		width: 100vw;
		max-width: 100vw;
	}
	
	.stats-grid {
		grid-template-columns: 1fr;
	}
	
	.detail-user-header {
		flex-direction: row;
		padding: 24rpx;
	}
	
	.detail-avatar {
		width: 100rpx;
		height: 100rpx;
		font-size: 40rpx;
	}
	
	.detail-username {
		font-size: 32rpx;
	}
	
	.detail-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 8rpx;
	}
	
	.item-value {
		text-align: left;
	}
	
	.drawer-body {
		padding: 24rpx;
	}
}
</style> 